<template>
  <div class="HomePage">
    <img class="Head" :src="Head" @click="changeHead" />
    <span class="Info" id="name1">{{ userName }}</span>
    <span class="Info" id="email1">{{ userEmail }}</span>
    <hr class="f1" />
    <div class="Information">
      <Information />
    </div>
    <input
      type="file"
      ref="fileInput"
      style="display: none"
      @change="handleImageChange"
    />
  </div>
</template>

<script>
import axios from "axios";
import Information from "./Information";
import { serverAddress } from "../js/config";
export default {
  name: "HomePage",
  components: {
    Information,
  },
  data() {
    return {
      AfterHead: null,
      SendHead: null,
      Head:sessionStorage.getItem('Head'),
    };
  },
  computed: {
    userEmail() {
      return sessionStorage.getItem('Email');
    },
    userName() {
      return sessionStorage.getItem('Name');
    },
  },
  methods: {
    changeHead() {
      this.$refs.fileInput.click();
    },
    handleImageChange(event) {
      const file = event.target.files[0];
      this.SendHead = file;
      // 获取选择的文件
      if (file) {
        const reader = new FileReader();
        reader.onload = () => {
          this.AfterHead = reader.result;
        };
        reader.readAsDataURL(file);
      }
      this.uploadImage();
    },
    uploadImage() {
      var api=`${serverAddress}/update/teacherNewHead`;
      let Image = new FormData();
      if(sessionStorage.getItem('Identity')==='教师'){
        Image.append("teacher_id", sessionStorage.getItem('Id'));
        Image.append("teacherNewHead", this.SendHead);
      }
      if(sessionStorage.getItem('Identity')==='管理员'){
        var api=`${serverAddress}/update/rootNewHead`;//管理员换头像路径
        Image.append("root_id", sessionStorage.getItem('Id'));
        Image.append("rootNewHead", this.SendHead);
      }
      axios({
         url:api,
        /* url: "https://mock.apifox.com/m1/3662090-0-default/changeHead", */
        method: "POST",
        data: Image,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
        .then((response) => {
          console.log(response.data);
          this.$store.commit("setHead", this.AfterHead);
          console.log(sessionStorage.getItem('Head'));
          this.Head=this.AfterHead;
          console.log(this.Head);
          this.$parent.changeHead(this.AfterHead);
        })
        .catch((error) => {
          alert("网络错误，头像更换失败");
          console.error("Network error:", error);
        });
    },
  },
};
</script>

<style scoped>
.Info {
  color: rgb(47, 47, 47);
}

.Info[id="name1"] {
  position: absolute;
  top: 23%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 1000;
}

.Info[id="email1"] {
  color: rgb(74, 74, 74);
  position: absolute;
  top: 29%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 500;
  font-size: 13px;
}

.f1 {
  width: 90%;
  border: 0.5px solid #a1bce1;
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.Head {
  height: 50px;
  width: 50px;
  border-radius: 25px;
  background-color: #eeb5eb;
  position: absolute;
  top: 13%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.HomePage {
  height: 400px;
  width: 280px;
  border: 1px solid #a1bce1;
  border-radius: 10px;
  transform: translate(-50%, -52%);
  background-color: #fff;
}
.HomePage::before {
  content: "";
  width: 0px;
  height: 0px;
  border: 10px solid transparent;
  border-bottom-color: #a1bce1; /* 将边框颜色设置为上边形成向上的三角形 */
  bottom: 400px; /* 将位置调整到底部 */
  left: 50%; /* 放置到中间 */
  transform: translateX(-50%); /* 使用 transform 属性水平居中 */
  position: absolute;
}

/* 用透明三角形去覆盖这个三角形 */
.HomePage::after {
  content: "";
  width: 0px;
  height: 0px;
  border: 8px solid transparent;
  border-bottom-color: white; /* 边框颜色设置为白色 */
  bottom: 400px; /* 调整位置 */
  left: 50%; /* 放置到中间 */
  transform: translateX(-50%); /* 使用 transform 属性水平居中 */
  position: absolute;
}
</style>